<template>
  <div class="el-container-wrapper">
    <el-container class="main_container">
      <!--    头部-->
      <el-header>
        <!--      logo-->
        <div class="left_box">
          <img src="../../assets/img/logo.png" alt="">
        </div>

        <!--面包谢-->
        <div style="width: 20%;min-width: 280px">
          <breadcrumb/>
        </div>

        <!--标签导航-->
        <div style="width: 58%">
          <tags-view/>
        </div>

        <!--      用户头像-->
        <div class="right_box">
          <el-dropdown>
            <img style="width: 60px;height: 60px" :src="loginUserImage" alt="">
            <el-dropdown-menu slot="dropdown" trigger="click">
              <el-dropdown-item icon="el-icon-house" @click.native="toWelcome">系统首页</el-dropdown-item>
              <el-dropdown-item icon="el-icon-ship" @click.native="toUserProfile">个人中心</el-dropdown-item>
              <el-dropdown-item icon="el-icon-switch-button" @click.native="logout">退出登陆</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-container class="contentDiv">
        <el-aside :width="isCollapse?'64px':'200px'">
          <el-menu
            class="el-menu-vertical-demo"
            active-text-color="#527CFF"
            background-color="#f5f5f5"
            style="height: 100%;"
            @open="handleOpen"
            @close="handleClose"
            :collapse="isCollapse"
            :collapse-transition="false"
            :router="true"
            :default-active="$route.path"
            unique-opened>
            <!--菜单树-->
            <MenuTree :menuList="this.menuList"></MenuTree>
          </el-menu>
        </el-aside>

        <el-main>
          <!--展开 收起-->
          <div class="toggle_box" :style="toggle_box" @click="toggleCollapse">
            <i :class="isCollapseIcon" style="margin-left:-3px;width: 12px"></i>
          </div>

          <router-view></router-view>

        </el-main>

      </el-container>
    </el-container>
  </div>
</template>

<script>
  import TagsView from '../tagsView/Index'
  import MenuTree from './MenuTree'
  import Breadcrumb from '@/components/Breadcrumb'
  import { findMenusList, getMenu } from '../../api/system/menu'
  import { logout } from '../../api/system/login'

  export default {
    name: 'Home',
    components: {
      MenuTree,
      TagsView,
      Breadcrumb
    },

    data () {
      return {
        isCollapse: false,
        isCollapseIcon: 'el-icon-arrow-left',
        loginUser: '',
        loginUserImage: '',
        loginUserName: '',
        menuList: [],
        toggle_box: {
          left: ''
        }
      }
    },

    //数据传递，爷传父，父传子
    comments: {
      MenuTree,
    },

    created () {
      window.sessionStorage.setItem('logout', '1')
      //创建组件时调用方法
      this.getMenusList()
      this.getAllMenus()
      this.loginUser = JSON.parse(window.sessionStorage.getItem('userInfo'))
      this.loginUserImage = this.loginUser.avatar
    },

    watch: {
      isCollapse () {
        this.toggle_box = {
          left: this.isCollapse ? '64px' : '200px'
        }
        this.isCollapseIcon = this.isCollapse ? 'el-icon-arrow-right' : 'el-icon-arrow-left'
      }
    },
    methods: {
      //回到首页
      toWelcome () {
        this.$router.push('/welcome')
      },

      //个人中心
      toUserProfile () {
        this.$router.push({ path: '/userProfile' })
      },

      //退出登陆
      async logout () {
        const res = await this.$confirm('此操作将退出系统, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出登入'
          })
        })
        if (res === 'confirm') {
          logout().then(resp => {
            if (resp) {
              window.sessionStorage.clear()
              this.$router.push('/login')
            }
          })
        }
      },

      //菜单伸缩
      toggleCollapse () {
        this.isCollapse = !this.isCollapse
      },

      //获取当前用户菜单列表
      getMenusList () {
        findMenusList().then(res => {
          if (res) {
            this.menuList = res.data.data.menus
          }
        })
      },

      //获取所有单列表
      getAllMenus () {
        getMenu().then(res => {
          if (res) {
            window.sessionStorage.setItem('urls', res.data.data.urls)
          }
        })
      },
      handleOpen (key, keyPath) {
      },
      handleClose (key, keyPath) {
      }
    }
  }
</script>

<style lang="less" scoped>
  .el-container-wrapper {
    height: 100%;
  }

  /**/
  .main_container {
    height: 100%;

    .contentDiv {
      position: fixed;
      /*固定定位*/
      top: 60px;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }

  /*头部样式*/
  .el-header {
    //84,92,100
    position: fixed;
    /*固定定位*/
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    z-index: 999;
    box-shadow: 0 2px 4px 0 var(--cb-color-shadow, rgba(0, 0, 0, 0.16));
    display: flex;
    /*两边对齐*/
    justify-content: space-between;
    padding-left: 0;
    align-items: center;
    font-size: 20px;

    .left_box {
      display: flex;
      align-items: center;

      /*logo*/

      img {
        width: 250px;
        height: 60px;
        margin-left: 10px;
      }


      span {
        color: #d9ffcf;
        margin-left: 15px;
      }
    }

    .right_box {
      .el-dropdown > img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: #fcfaff;
        margin: 0 15px 0 0;
        background-size: contain;
      }
    }
  }

  /*侧边栏*/
  .el-aside {
    /*固定定位*/
    height: 100%;

    /*菜单*/

    .el-menu {
    }
  }

  /*内容主体*/
  .el-main {
    background-color: #fcfcfc;

    /*展开 收起*/

    .toggle_box {
      position: absolute;
      background-color: #e8e8e8;
      width: 14px;
      height: 66px;
      top: 45%;
      left: 200px;
      text-align: center;
      line-height: 66px;
      transform: perspective(2em) rotateY(30deg);
      display: inline;
      letter-spacing: 0.2em;
      cursor: pointer;
    }

  }


  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }

</style>
